<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>客户管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
</head>

<body>
<div class="place">
  <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>用户管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">员工编号：</label>
      <div class="layui-input-inline">
        <input type="text" id="empNo" name="empNo" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">员工姓名：</label>
      <div class="layui-input-inline">
        <input type="text" id="ename" name="ename" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">所属部门：</label>
      <div class="layui-input-inline">
        <select name="deptNo" id="deptNo" lay-filter="deptSelect">
          <option value="">请选择</option>
        </select>
      </div>
      <label class="layui-form-label">状态：</label>
      <div class="layui-input-inline">
        <select name="status" id="status" lay-filter="statusSelect">
          <option value="">请选择</option>
          <option value="0">离职</option>
          <option value="1">在职</option>
        </select>
      </div>

    <div class="layui-form-item">
      <div class="layui-btn-container" style="padding:20px 20px 0px 20px">
        <button type="button" class="layui-btn layui-btn-normal  btn-search" ><i class="layui-icon layui-icon-search"></i>查询</button>
        <button type="button" class="layui-btn layui-btn-warm btn-add" lay-event="add"><i class="layui-icon layui-icon-addition"></i>添加</button>
        <button type="button" class="layui-btn layui-btn-danger btn-dele" lay-><i class="layui-icon">&#xe640;</i>删除</button>
      </div>
    </div>
    <table id="demo" lay-filter="test"></table>

    </div>
  </form>
<script>
  layui.use(['table','form','layer','jquery'], function () {
    var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;
    //表单初始化 传参


  //赋值部分 城市
  $.ajax({
    url: "dept/selectDeptList",
    type: "post",
    dataType: "json",
    success: function(data) {
      // console.log(data)
      //使用循环遍历，给下拉列表赋值
      $.each(data.data,function (index,value) {
        $("#deptNo").append(new Option(value.deptName,value.deptNo))//对应映射字段名 第一个为显示的值  第二个为value值
      });
      form.render("select")//重新渲染 固定写法
  }
  });







    //查询
    $('.btn-search').on('click', function () {
      var empNo = $('#empNo').val();
      var ename = $('#ename').val();
      var deptNo = $('#deptNo').val();
      var status = $('#status').val();
      table.reload('demo', {
        url: 'user/getUserList',
        method: 'post',
        dataType: 'json',
        where: { //设定异步数据接口的额外参数，任意设
          empNo: empNo,
          ename: ename,
          deptNo: deptNo,
          status: status,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });
    //添加
    $('.btn-add').on('click', function () {
      layer.open({
        type: 2,
        shift: 2,
        title: '添加信息',
        area: ['1000px', '700px'],
        content: 'sys/users/userAdd.jsp',
        btnAlign: 'c',
        btn: ['关闭'],
      });
      form.render();
    });
    //删除
    $('.btn-dele').on('click', function () {
      var cs = table.checkStatus('demo');
      console.log(cs.data)
      var data = cs.data;
      var i = data.length;
      if (i < 1) {
        layer.msg('请选择需要删除的人员信息', {icon: 5});
        return;
      }
      layer.confirm('确定要删除选中的人员信息吗？', function (index) {
        $.ajax({
          url: 'user/deleteUser',
          type: 'post',
          data: {
            id: data[0].id
          },
          dataType: 'json',
          success: function (resp) {
            if (resp.success) {
              table.reload('demo', {
                where: {
                },
                page: {
                  curr: 1 //重新从第 1 页开始
                }
              });
              layer.msg(resp.message, {icon: 6});
            } else {
              layer.msg(resp.message, {icon: 5});
            }
          }
        });
      });
    });

    table.render({
      elem: '#demo'
      ,height: 600
      ,url: 'user/getUserList' //数据接口
      ,page: true //开启分页
      ,loading:true
      ,limit: 10   // 每页条数默认10
      ,limits: [1, 2, 4, 5,6,8,10] //设置可选的每页条数
      ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
      ,cellMinWidth: 0 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,id:'demo'
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: '序号',type:'numbers', sort: true, fixed: 'left',align: "center" }
        ,{field: 'empNo', title: '员工编号', sort: true,align: "center"}
        ,{field: 'ename', title: '员工姓名', align: "center"}
        ,{field: 'tel', title: '联系电话', align: "center"}/*
        ,{field: 'mgr', title: '上司对象', align: "center"}
        ,{field: 'role', title: '职位对象', align: "center"}*/
        ,{field: 'mgrName', title: '上司',width:0, align: "center"
          ,templet: function (res) {
            if (res.mgr.empNo != null) {
              return res.mgr.ename;
            } else {
              return '';
            }

          }}
        ,{field: 'dept', title: '所属部门',align: "center"
          ,templet: function (res) {
              return res.role.dept.deptName;
            }}
        ,{field: 'jobName', title: '职位', align: "center"
        ,templet: function (res) {
            return res.role.job;
        }}
        , {field: 'sex', title: '性别', align: "center",
          templet: function (sex) {
            if (sex.status == '1') {
              return '男';
            } else {
              return '女';
            }
          }
        }
        ,{field: 'age', title: '年龄', align: "center"}
        ,{field: 'status', title: '状态',align: "center",
          templet:function(status){
            if(status.status=='1'){
              return '在职';
            }else{
              return '离职';
            }
          }
        }
        ,{field: 'hiredate', title: '入职时间',align: "center",templet: "#time1"}
        ,{field: 'dimissionTime', title: '离职时间',align: "center",templet: "#time2"}
        ,{field: 'birthday', title: '出生日期',width:0, align: "center",templet:"#time3"}
        ,{field: 'loginName', title: '登录账号', sort: true,align: "center"}
        ,{field: 'password', title: '密码',width:0, align: "center"}
        ,{fixed: 'right',title: '操作',toolbar: '#barDemo',width:220 , align: "center"}
      ]]
      ,done: function (){
        table.resize('demo');
      }
    });

    //工具条事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      // console.log(data)
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'detail'){ //查看
        layer.open({
          type: 2,
          shift: 2,
          title: '查看信息',
          area: ['1000px', '700px'],
          content: 'sys/users/userView.jsp',
          btnAlign: 'c',
          btn: ['关闭'],
          success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            body.find("#empNo").val(data.empNo);
            body.find("#ename").val(data.ename);
            body.find("#sex").val(data.sex);
            body.find("#tel").val(data.tel);
            body.find("#deptNo").val(data.deptNo);
            body.find("#job").val(data.role);
            body.find("#mgr").val(data.mgr);
            body.find("#age").val(data.age);
            body.find("#hiredate").val(data.hiredate);
            body.find("#status").val(data.status);
            body.find("#dimissionTime").val(data.dimissionTime);
            body.find("#date1").val(data.birthday);
            body.find("#loginName").val(data.loginName);
            body.find("#password").val(data.password);
          },
        });
        form.render();
      }

      if(layEvent === 'edit'){ //修改
        layer.open({
          type: 2,
          shift: 2,
          title: '修改信息',
          area: ['1000px', '700px'],
          content: 'sys/users/userUpdate.jsp',
          success: function (layero, index) {
            console.log(data.role)
            console.log(data.mgr)
            var body = layer.getChildFrame('body', index);
            body.find("#empNo").val(data.empNo);
            body.find("#ename").val(data.ename);
            body.find("#sex").val(data.sex);
            body.find("#tel").val(data.tel);
            body.find("#deptNo").val(data.deptNo);
            body.find("#roleid").val(data.role.id);
            body.find("#mgrid").val(data.mgr.empNo);
            body.find("#age").val(data.age);
            body.find("#hiredate").val(data.hiredate);
            body.find("#status").val(data.status);
            body.find("#dimissionTime").val(data.dimissionTime);
            body.find("#date1").val(data.birthday);
            body.find("#loginName").val(data.loginName);
            body.find("#password").val(data.password);
          },
          btn: ['关闭'],
        });
        form.render();
      }

      if(layEvent == 'dimission'){
          layer.open({
            type:1,
            title: '提示信息'
            ,btnAlign: 'c',
            content: '<div style="padding: 20px 80px;">您确定此员工离职吗?</div>',
            area: ['300px'],
            btn: ['确定','关闭'],
            yes: function(index, layero){
              $.ajax({
                url: 'user/upadteUserstatusTo0',
                type: 'post',
                data: {
                  empNo: data.empNo //传给后台的参数名：参数值（data.empNo表示本行数据的empNo属性值）
                },
                dataType: 'json',
                success: function (resp) {
                  if (resp.success) {
                    layer.msg("离职成功!");
                    table.reload('#demo', {
                      where: {},
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                  }
                }
              });
              //do something
              layer.close(index); //如果设定了yes回调，需进行手工关闭
              parent.layui.table.reload('demo',{page:{curr:1}})
            }
          });
          form.render();
        }

      if(layEvent == 'recover'){
        layer.open({
          type:1,
          title: '提示信息'
          ,btnAlign: 'c',
          content: '<div style="padding: 20px 80px;">您确定恢复此员工就职吗?</div>',
          area: ['300px'],
          btn: ['确定','关闭'],
          yes: function(index, layero){
            console.log(data)
            console.log(data.empNo)//10005
            console.log(data.status)//0
            $.ajax({
              url: 'user/upadteUserstatusTo1',
              type: 'post',
              data: {
                empNo: data.empNo //传给后台的参数名：参数值（data.empNo表示本行数据的empNo属性值）
              },
              dataType: 'json',
              success: function (resp) {
                if (resp.success) {
                  layer.msg("恢复成功!");
                  table.reload('#demo', {
                    where: {},
                    page: {
                      curr: 1 //重新从第 1 页开始
                    }
                  });
                }
              }
            });
            //do something
            layer.close(index); //如果设定了yes回调，需进行手工关闭
            parent.layui.table.reload('demo',{page:{curr:1}})
          }
        });
        form.render();
      }
      form.render();
    });
    form.render();
  });
</script>
  <script type="text/html" id="time3">
    {{#  if(d.birthday !=null){ }}
    <div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>
    {{#  } else {}}
    <div>{{}}</div>
    {{#  } }}
  </script>
  <script type="text/html" id="time2">
    {{#  if(d.dimissionTime !=null){ }}
    <div>{{layui.util.toDateString(d.dimissionTime, 'yyyy-MM-dd')}}</div>
    {{#  } else {}}
    <div>{{}}</div>
    {{#  } }}
  </script>
  <script type="text/html" id="time1">
    {{#  if(d.hiredate !=null){ }}
    <div>{{layui.util.toDateString(d.hiredate, 'yyyy-MM-dd')}}</div>
    {{#  } else {}}
    <div>{{}}</div>
    {{#  } }}
  </script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">查看详情</a>
  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">修改</a>
  {{# if(d.status=='1'){ }}
  <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="dimission">离职</a>
  {{# }else{ }}
  <a class="layui-btn  layui-btn-xs layui-btn-warm" lay-event="recover">恢复</a>
  {{# } }}
</script>
</div>
</body>
</html>
